<template>
  <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
    <div class="logo">
      <google-outlined :style="{ fontSize: '28px', color: '#08c' }" />
      <span class="guanli"> 管理后台</span>
    </div>
    <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
      <div class="xinjian">
        <div class="btn-box">
          <button class="btn">
            <plus-outlined :style="{ fontSize: '18px' }" />
            <span>新</span>
          </button>
        </div>
      </div>
      <div v-for="(item, index) in state.routerTable">
        <a-sub-menu v-if="item.children" :key="item.name">
          <template #title>
            <switcher-outlined :style="{ fontSize: '18px' }" />
            {{ item.meta.crumbs?.[0] }}</template
          >
          <a-menu-item v-for="(v, index) in item.children" :key="v.name">
            <router-link :to="v.path"> {{ v.meta.crumbs?.[1] }}</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item v-else :key="item.name">
          <switcher-outlined :style="{ fontSize: '18px' }" />
          <router-link :to="item.path">{{ item.meta.crumbs?.[0] }}</router-link>
        </a-menu-item>
      </div>
    </a-menu>
  </a-layout-sider>
</template>
<script lang="ts">
import { defineComponent, ref, computed, reactive, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
// import {
//   PieChartOutlined,
//   DesktopOutlined,
//   UserOutlined,
//   TeamOutlined,
//   FileOutlined,
//   StarOutlined,
//   HomeOutlined,
//   SettingFilled,
//   SmileOutlined,
//   SyncOutlined,
//   LoadingOutlined,
//   MessageOutlined,
//   WalletOutlined,
//   SwitcherOutlined,
//   GoogleOutlined,
//   PlusOutlined
// } from '@ant-design/icons-vue'
export default defineComponent({
  name: 'MenuList',
  // components: {
  //   PieChartOutlined,
  //   DesktopOutlined,
  //   UserOutlined,
  //   TeamOutlined,
  //   FileOutlined,
  //   HomeOutlined,
  //   SettingFilled,
  //   SmileOutlined,
  //   SyncOutlined,
  //   LoadingOutlined,
  //   MessageOutlined,
  //   StarOutlined,
  //   WalletOutlined,
  //   SwitcherOutlined,
  //   GoogleOutlined,
  //   PlusOutlined
  // },
  setup() {
    const routerTable =
      JSON.parse(sessionStorage.getItem('routerTable'))[
        JSON.parse(sessionStorage.getItem('routerTable')).length - 1
      ].children || []

    routerTable.shift()
    const state = reactive({
      routerTable,
      currentRouterName: ''
    })
    const selectedKeys = ref<string[]>([''])
    const route = useRouter()
    const store = useStore()
    const collapsed = computed(() => store.state.collapsed)
    watch(
      () => route.currentRoute.value.name,
      (newValue: any) => {
        // console.log('监听到的路由',newValue);
        //  console.log(selectedKeys.value);
        selectedKeys.value.splice(0, 1, newValue)
        // state.currentRouterName = newValue
      },
      { immediate: true }
    )
    console.log(selectedKeys)

    // const router = computed(() => store.state.Routers)
    // console.log(router)

    return {
      collapsed,
      selectedKeys,
      state
    }
  }
})
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  width: 50px;
  height: 50px;
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.ant-menu-item a {
  color: #ccc !important;
}
#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout .site-layout-background {
  background: #fff;
}
.logo {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: red; */
}
.logo img {
  width: 50px;
  height: 50px;
}
.logo h2 {
  margin-top: 10px;
  color: #fff;
}

.btn-box {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.guanli {
  font-size: 20px;
  color: #fff;
}
.span a:hover {
  color: #000;
}
.btn {
  width: 85%;
  height: 40px;
  background: #0188fb;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
